<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 
        属性 lay-percent ：代表进度条的初始百分比
       -->
      <div>
        <h2>普通进度条</h2>
        <div class="layui-progress">
          <div class="layui-progress-bar" lay-percent="1/3"></div>
        </div>
        <br />
        <div class="layui-progress layui-progress-big">
          <div class="layui-progress-bar layui-bg-red layui-progress-big" lay-percent="33%"></div>
        </div>
      </div>
      <!-- 
      显示文本  lay-showPercent="yes"
       -->
      <div>
        <h2>显示文本</h2>
        <div class="layui-progress" lay-showPercent="true">
          <div class="layui-progress-bar" lay-percent="1/3"></div>
        </div>
        <br />
        <div class="layui-progress" lay-showPercent="true">
          <div class="layui-progress-bar" lay-percent="33%"></div>
        </div>
        <div lay-filter="demoProgress" class="layui-progress layui-progress-big" lay-showPercent="true">
          <div class="layui-progress-bar layui-bg-red layui-progress-big" lay-percent="10%"></div>
        </div>
        <button id="btn" class="layui-btn">更新进度条</button>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["element"], function () {
        var element = layui.element;
        var $ = layui.$;
        $("#btn").on("click", function () {
          element.progress("demoProgress", "55%");
        });
      });
    </script>
  </body>
</html>
